<template>
    <div class="Batchimportofhouses">
         <!-- 房屋批量导入表头 -->
        <div class="AddCommunitytitle">
            <p>
                <i class="el-icon-arrow-left"></i>
                <span>房屋批量导入</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 房屋批量导入内容 -->
        <div class="Batchimportofhousescontenct">
            <div class="uploadleft">
                <p class="texttitle">
                    <span class="star">*</span>
                    <span class="title"> 选择导入文件：</span>
                </p>
            </div>
            <div class="uploadright">
                <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">支持格式：.xls、.xlsx、.csv ，单个文件不能超过20MB</div>
                </el-upload>
                <p class="downliad">下载模板</p>
                <div class="Importrecords">
                    <p class="Importrecordstitle">导入记录：</p>
                    <ul class="Importrecordslists">
                        <li v-for="n in 5" :key="n">
                            <span>2021-06-22 10:10:01 导入 1000条数据  成功300条 失败700条              </span>
                            <span>查看详情</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 添加社区保存按钮 -->
        <div class="contentfooter">
            <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
            <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        // 添加社区底部保存 保存重建 重置按钮
        save(){
            console.log("保存")
        },
        reseate(){
            console.log("重置")
        }
    }
}
</script>

<style lang="scss" scoped>
    .Batchimportofhouses{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 批量添加标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 批量导入的内容模块
        .Batchimportofhousescontenct{
            width: 100%;
            padding: 40px;
            border-bottom: 1px solid rgba(233, 233, 233, 1);
            box-sizing: border-box;
            display: flex;
            .uploadleft{
                width: 114px;
                .texttitle{
                    font-size: 14px;
                    color: #666666;
                    .star{
                        color: #FF3B30;
                    }
                }
            }
            .uploadright{
                width: 444px;
                .el-upload__tip{
                    font-size: 14px;
                    color: #999;
                }
                .downliad{
                    font-size: 12px;
                    color: #0079FE;
                    margin:  20px 0;
                }
                .Importrecords{
                    font-size: 12px;
                    color: #999;
                    .Importrecordstitle{
                        margin-bottom: 10px;
                    }
                    .Importrecordslists{
                        width: 444px;
                        li{
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 10px;
                            & span:nth-child(2){
                                color: #0079FE;
                            }
                        }
                    }
                }
            }
        }
        // 添加社区底部按钮
        .contentfooter{
            width: 100%;
            box-sizing: border-box;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            .savebutton,.reseatebutton{
                width: 140px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .savebutton{
                margin-right: 40px;
            }
            .createbutton{
                width: 160px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>